<template>
    <div class="courseList">
        <div class="header">
            <el-button type="primary" @click="handleAdd">添加课程</el-button>
            <el-dialog title="课程信息" :visible.sync="dialogAddVisible">
                <div class="dialogAdd">
                    <FormAdd btnMsg="添加课程" @success="doNext"></FormAdd>
                </div>
            </el-dialog>
            <el-input placeholder="输入关键字搜索" v-model="search" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="findUser"></el-button>
            </el-input>
        </div>
        <el-table :data="courseList" height="520" style="width: 100%;padding: 20px;margin: 0 auto;">
            <el-table-column prop="courseDesc" label="课程描述" width="200" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="courseName" label="课程名字" width="260" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="schoolId" label="学校" width="200" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" width="260">
                <template slot-scope="scope">
                    <div style="display: flex;flex-direction: row;">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="课程信息" :visible.sync="dialogFormVisible">
            <el-form :model="editInfo" :rules="rules" ref="editForm">
                <el-form-item label="courseDesc" :label-width="formLabelWidth" prop="courseDesc">
                    <el-input v-model="editInfo.courseDesc" autocomplete="off" placeholder="courseDesc"></el-input>
                </el-form-item>

                <el-form-item label="courseName" :label-width="formLabelWidth" prop="courseName">
                    <el-input v-model="editInfo.courseName" autocomplete="off" placeholder="courseName"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="changeInfo('editForm')">确 定</el-button>
            </div>
        </el-dialog>

        <div class="pages">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
  
<script>
import FormAdd from '../FormAdd.vue';

export default {
    name: 'GradePage',
    components: {
        FormAdd,
    },
    data() {
        return {
            msg: '课程管理',
            schoolId: 1,
            courseList: [],
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            // 搜索
            search: '',
            // 编辑
            editInfo: {},
            dialogFormVisible: false,
            dialogAddVisible: false,
            formLabelWidth: '120px',
            rules: {
                courseDesc: [
                    { required: true, message: 'courseDesc不能为空', trigger: 'blur' }
                ],
                courseName: [
                    { required: true, message: 'courseName不能为空', trigger: 'blur' }
                ],
            },
        }
    },
    methods: {
        // 编辑
        handleEdit(index, row) {
            console.log(index, row);
            this.editInfo = { ...row };
            this.dialogFormVisible = true;
        },
        // 
        changeInfo(form) {
            this.$refs[form].validate((valid) => {//表单校验
                if (valid) {//valid表示验证是否通过，返回值为布尔类型
                    this.dialogFormVisible = false;
                    this.$axios.post('http://39.105.215.62:8200/course/updateCourse', this.editInfo)
                        .then(async (res) => {
                            console.log(res);
                            if (res.code == 200) {
                                await this.getList();
                                this.$message({
                                    message: res.msg,
                                    type: 'success'
                                });
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                } else {
                    console.log('表格不能为空!!');
                    return false;
                }
            });
        },
        handleDelete(index, row) {
            console.log(index, row.id);
            // 提示信息
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            })
                .then(async () => {
                    let res = await this.$axios.post(`http://39.105.215.62:8200/course/deleteCourse?id=${row.id}`);
                    console.log(res);
                    if (res.code == 200) {
                        await this.getList();
                        this.$message({
                            type: 'success',
                            message: res.msg
                        });
                        if (this.courseList.length == 0 && this.currentPage > 1) {
                            this.currentPage = this.currentPage - 1;
                            await this.getList();
                        }
                    }
                })
        },
        handleAdd() {
            this.dialogAddVisible = true;
        },
        async doNext(msg) {
            if (msg) {
                this.dialogAddVisible = false;
                await this.getList();
            }
        },
        async getList() {
            let result = await this.$axios.post(`http://39.105.215.62:8200/course/selectCourses?pageNum=${this.currentPage}&pageSize=${this.pageSize}`, { schoolId: this.schoolId, courseId: 0 });
            console.log(result);
            this.courseList = result.data.records;
            this.total = result.data.total;
        },
        async handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            // this.getList();
        },
        async handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            // this.getList();
        },
        async findUser() {
            if (this.search == '') {
                await this.getList();
                this.$message.error('请输入关键字进行查找!')
            }
            else {
                let result = await this.$axios.post(`http://39.105.215.62:8200/course/selectCourses?pageNum=${this.currentPage}&pageSize=${this.pageSize}`, { schoolId: this.schoolId, courseId: 0, courseName: this.search });
                console.log(result);
                this.courseList = result.data.records;
                this.total = result.data.total;
                if (result.data.total == 0) {
                    this.$message.error(result.msg)
                } else {
                    this.$message.success(result.msg)
                }
                this.search = '';
            }
        }
    },
    // 生命周期函数--钩子函数一般在初始化页面完成后，再对DOM节点进行相关操作
    async mounted() {
        console.log(this.$route.query);
        this.$emit("transfer", this.msg);
        this.schoolId = JSON.parse(sessionStorage.getItem('info')).schoolId;
        await this.getList()
    }
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 5px;
}

.input-with-select {
    width: 400px;
}

.dialogAdd {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pages {
    margin: 20px auto;
}
</style>
  